<template>
  <!-- <div class=" w-full h-[200px] bg-red-300 ">资源管理</div> -->
  <div class="layout">
    <div class="layout-content">
      <div class="search">
        <a-form :model="form" @submit="handleSubmit">
          <div style="width: 100%; margin-bottom: 20px">
            <a-row justify="end">
              <a-col :span="8">
                <a-form-item field="value1" label="" label-col-flex="0px">
                  <a-input v-model="form.value1" placeholder="请输入资源名称" />
                </a-form-item>
              </a-col>
              <a-col :span="2">
                <a-form-item label="" label-col-flex="10px">
                  <a-button
                    type="primary"
                    v-if="collapseType"
                    style="width: 60px"
                    @click="handleClick"
                  >
                    <icon-filter />
                  </a-button>
                  <a-button v-else style="width: 60px" @click="handleClick">
                    <icon-filter />
                  </a-button>
                </a-form-item>
              </a-col>
              <a-col :span="6" :offset="8">
                <a-form-item label="" label-col-flex="80px">
                  <a-space size="medium">
                    <a-button @click="handeleclick">同步血缘</a-button>
                    <a-dropdown-button trigger="hover" @click="handleChick">
                      添加资源
                      <template #icon>
                        <icon-down />
                      </template>
                      <template #content>
                        <a-doption>批量导入</a-doption>
                      </template>
                    </a-dropdown-button>
                    <a-button html-type="submit"> 查询 </a-button>
                  </a-space>
                </a-form-item>
              </a-col>
            </a-row>
          </div>
          <div
            class="more-fliter-box w-full h-[120px] mt-[20px] mb-0 p-[20px] pl-[10px] pr-[10px] box-border bg-[#F7F9FC]"
            v-if="moreFilterKey"
          >
            <a-row class="w-full h-[40px] overflow-hidden" justify="start">
              <a-col :span="8">
                <a-form-item field="value1" label="" label-col-flex="">
                  <a-select placeholder="关联状态">
                    <a-option>Beijing</a-option>
                    <a-option>Shanghai</a-option>
                    <a-option>Guangzhou</a-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item field="value1" label="" label-col-flex="">
                  <a-range-picker :style="{ width: '100%' }" @change="onChange" @select="onSelect">
                  </a-range-picker>
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item field="value1" label="" label-col-flex="">
                  <a-select placeholder="关联状态">
                    <a-option>Beijing</a-option>
                    <a-option>Shanghai</a-option>
                    <a-option>Guangzhou</a-option>
                  </a-select>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row class="grid-demo">
              <a-col :span="8">
                <a-form-item field="value1" label="" label-col-flex="">
                  <a-range-picker :style="{ width: '100%' }" @change="onChange" @select="onSelect">
                  </a-range-picker>
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item field="value1" label="" label-col-flex="">
                  <a-select placeholder="是否根资源">
                    <a-option>Beijing</a-option>
                    <a-option>Shanghai</a-option>
                    <a-option>Guangzhou</a-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :span="1">
                <a-form-item field="value1" label="" label-col-flex="0px">
                  <a-button type="primary">Primary</a-button>
                </a-form-item>
              </a-col>
            </a-row>
          </div>
        </a-form>
      </div>
      <div class="table-content w-full h-auto bg-cyan-400">
        <div style="width: 100%; height: 100%; background-color: #fff">
          <TableView
            :columns="columns"
            :data="data"
            @edit="handleEdit"
            @del="handleDel"
          ></TableView>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { reactive, ref } from 'vue';
import TableView from '@/components/TableView.vue';
import { useRouter } from 'vue-router';
const router = useRouter();
/**
 * @method 表单筛选元素
 */
const form = reactive({
  value1: '',
  value2: '',
  value3: '',
  value4: '',
  value5: ''
});
/**
 * @method 动态高度计算
 */
const activeHeight = ref(0); // 初始高度
const collapseType = ref(false);
const handleClick = () => {
  collapseType.value = !collapseType.value;
  // collapseType.value ? activeHeight.value = 120 : activeHeight.value = 0
  const container = document.getElementById('collapsible-content'); // 获取容器元素
  if (container && collapseType.value) {
    const contentHeight = container.scrollHeight; // 获取内容区域的高度
    const paddingTop = parseInt(getComputedStyle(container).paddingTop); // 获取上边距的像素值
    const paddingBottom = parseInt(getComputedStyle(container).paddingBottom); // 获取下边距的像素值
    activeHeight.value = contentHeight - paddingTop - paddingBottom; // 设置元素的高度为内容区域高度减去上下边距的像素值
  } else {
    activeHeight.value = 0;
    console.log(collapseType.value);
  }
};

/**
 * @method table表格的标题
 */
const columns = reactive([
  {
    title: '资源名称',
    dataIndex: 'name'
  },
  {
    title: '资源版本',
    dataIndex: 'salary'
  },
  {
    title: '关联状态',
    dataIndex: 'address'
  },
  {
    title: '是否根之源',
    dataIndex: 'email'
  },
  {
    title: '添加时间',
    dataIndex: 'email'
  },
  {
    title: '操作',
    slotName: 'handle'
  }
]);
/**
 * @method table表格的数据
 */
const data = reactive([
  {
    key: '1',
    name: 'Jane Doe',
    salary: 23000,
    address: '32 Park Road, London',
    email: 'jane.doe@example.com'
  },
  {
    key: '2',
    name: 'Alisa Ross',
    salary: 25000,
    address: '35 Park Road, London',
    email: 'alisa.ross@example.com'
  },
  {
    key: '3',
    name: 'Kevin Sandra',
    salary: 22000,
    address: '31 Park Road, London',
    email: 'kevin.sandra@example.com'
  },
  {
    key: '4',
    name: 'Ed Hellen',
    salary: 17000,
    address: '42 Park Road, London',
    email: 'ed.hellen@example.com'
  },
  {
    key: '5',
    name: 'William Smith',
    salary: 27000,
    address: '62 Park Road, London',
    email: 'william.smith@example.com'
  },
  {
    key: '6',
    name: 'William Smith',
    salary: 27000,
    address: '62 Park Road, London',
    email: 'william.smith@example.com'
  }
]);
/**
 * @method table表格的编辑
 */
const handleEdit = (value: any) => {
  console.log(value);
};
/**
 * @method table表格的删除
 */
const handleDel = (value: any) => {
  console.log(value);
};
/**
 * @method 初始化渲染数据
 */

/**
 * @method 提交数据
 */
const handleSubmit = () => {
  console.log(form);
};
/**
 * @method 添加资源
 */
const handleChick = () => {
  router.push('/add');
};
</script>

<style lang="less" scoped>
.layout {
  padding: 20px;
  width: 100%;
  height: calc(100vh - 128px);
  background-color: #f9f9f9;

  .layout-content {
    width: 100%;
    height: 100%;
    background-color: #fff;

    .search {
      padding: 20px;

      .arco-form-item {
        margin-bottom: 0px;
      }

      .grid-demo {
        width: 100%;
        height: 60px;
        display: flex;
        align-items: center;
        // background-color: red;
      }

      .search-fotter {
        margin-top: 10px;
      }
    }

    .table-content {
      padding: 20px;
    }
  }
}
</style>
